<template>
  <div class="bindtel" ref="homePage">
    <van-nav-bar @click-left="clickleft" style="background: #ececec;" title="绑定手机号" left-text="" left-arrow>
      <div slot="right" class="searcha">
      </div>
    </van-nav-bar>
    <div style="width: 100%;height: 46px;"></div>
    <div>
      <van-cell-group>
        <van-field v-model="phone" center clearable label="手机号" placeholder="请输入手机号">
        </van-field>
      </van-cell-group>
      <div class="div">
        <span class="wenzi">图形码</span>
        <input class="input" type="text" placeholder="请输入图形码" />
        <img class="img" src="" />
      </div>
      <van-cell-group>
        <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <van-button style="width: 5.375rem;background-color:#46d0ca;" @click="code(type)" v-model="yzm" slot="button" size="small" type="primary">{{yzm}}</van-button>
        </van-field>
      </van-cell-group>
    </div>
    <div style="width: 100%;display: flex;justify-content: center;">
      <van-button style="width: 90%;margin-top: 10% ;" round  color="#46d0ca" type="default">保存</van-button>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        clintHeigth: '', //获取页面高度
        type: this.$route.query.type,
        img: '', //图形码
        phone: '', //手机号
        sms: '', //输入的短信验证码
        yzm: '发送验证码', //验证码
        thing: true, //判断是否正在发码
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
    methods: {
      clickleft() {
        this.$router.back(-1);
        console.log(1)
      },
      code(type) {
        // let that = this
        if (this.thing == true) {
          this.daojishi(60);
        } else {

        }
      },
      daojishi(time) {//倒计时发验证码
        var that = this;
        that.thing = false;
        // console.log(time)
        if (time < 0) {
          that.yzm = "重新发送"
          that.thing = true;
          return;
        }
        setTimeout(function() {
          time--;
          that.yzm = time + "秒后重新发送";
          that.daojishi(time)
        }, 1000)
      },
    }
  }
</script>

<style lang="scss">
  .bindtel {
    .van-nav-bar {
      .van-nav-bar__left {
        .van-icon {
          color: white !important;
          // font-size: 1.25;
        }
      }

    }
    .van-cell-group{
      .van-cell{
        .van-cell__value{
          .van-field__body{
            .van-field__button{
              .van-button--primary{
                border: 1px solid #46d0ca;
              }
            }
          }
        }
      }
    }
    .div {
      padding: 5px 20px;
      display: flex;
      height: 40px;
      align-items: center;
      background: white;
      font-size: 14px;
      border: none !important;
      .wenzi {

        width: 90px;
        display: block;
      }

      .input {
        height: 1.875rem;
        width: 8.75rem;

        border: none;
      }

      .img {
        width: 6.25rem;
        height: 2rem;
        position: absolute;
        right: 0.9375rem;
      }
    }
  }
</style>
